<template>
  <div id="Salesvolume">
    <div class="Salesvolume-header">
      <div class="Salesvolume-div">
        <span>订单量</span>
        <h1>+98.85</h1>
      </div>
    </div>
    <div style="overflow: hidden; background:rgba(255,255,255,1)">
      <div class="Salesvolume-content">
        <h1>类型</h1>
        <span>商品交易</span>
      </div>
      <div class="Salesvolume-siod"></div>
    </div>
    <div style="overflow: hidden; background:rgba(255,255,255,1)">
      <div class="Salesvolume-content">
        <h1>时间</h1>
        <span>2018-12-19 13:18:05</span>
      </div>
      <div class="Salesvolume-siod"></div>
    </div>
    <div style="overflow: hidden;  background:rgba(255,255,255,1)">
      <div class="Salesvolume-content">
        <h1>所属订单全部号</h1>
        <span>95421368495163</span>
      </div>
    </div>
    <div class="Salesvolume-footer">
      <p>商品清单</p>
      <div class="Salesvolume-footerDiv">
        <img src="../../assets/1546844322(1).jpg" alt>
        <div>
          <h1>南极人睡衣女冬季法兰绒加厚</h1>
          <p>数量：1件</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 罗盘订单详情
export default {
  name: 'CompassOrderDetails',
  created: () => {
    document.title = '订单量详情'
  }
}
</script>

<style lang='scss' scoped>
#Salesvolume{
  width:100%;
  height: 100%;
  background: #f2f2f2;
}
.Salesvolume-header {
  width: 100vw;
  height: 44.8vw;
  background: rgba(255, 255, 255, 1);
  margin-bottom: 4vw;
}
.Salesvolume-div {
  width: 86.6vw;
  height: 23.67vh;
  background: rgba(255, 255, 255, 1);
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  h1 {
    font-size: 11.73vw;
    font-family: SourceHanSansCN-Bold;
    font-weight: bold;
    color: rgba(22, 22, 22, 1);
    margin-top: 5.3vw;
  }
  span {
    font-size: 3.73vw;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    color: rgba(22, 22, 22, 1);
  }
}
.Salesvolume-content {
  height: 14.6vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 1);
  h1 {
    margin-left: 3.46vw;
    font-size: 4.5vw;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    color: rgba(22, 22, 22, 1);
  }
  span {
    margin-right: 3.46vw;
    font-size: 3.7vw;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    color: rgba(168, 168, 168, 1);
  }
}
.Salesvolume-siod {
  float: right;
  width: 96vw;
  border-top: 1px solid rgba(238, 238, 238, 1);
}
.Salesvolume-footer {
  height: 34.1vw;
  background: rgba(255, 255, 255, 1);
  margin-top: 5.3vw;
  padding: 2.99vh 0 0 3.4vw;
  p {
    font-size: 3.73vw;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    color: rgba(22, 22, 22, 1);
    margin-bottom: 2.24vh;
  }
  .Salesvolume-footerDiv {
    background: rgba(255, 255, 255, 1);
    display: flex;
    img {
      width: 13vw;
      height: 13vw;
      margin-top:2.2vh;
      margin-right: 1.33vw;
    }
    h1 {
      width: 78.6vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top:2.99vh;
      font-size: 4.5vw;
      font-family: SourceHanSansCN-Bold;
      font-weight: bold;
      color: rgba(22, 22, 22, 1);
      margin-bottom:1.49vh;
    }
    p {
      font-size: 3.2vw;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(22, 22, 22, 1);
    }
  }
}
</style>
